<script setup lang="ts">
import { addPermission, updatePermissionApi } from "@/api/menu";
import { ref } from "vue";

const isEditor = ref(false);
const visible = ref(false);

class PermissionFrom {
  menuId = "";
  permission = [
    {
      id: undefined,
      name: "",
      path: "",
    },
  ];
}

const permissionFrom = ref(new PermissionFrom());

const permissionFromRef = ref<any>(null);

const open = (menuId: any, data: any) => {
  console.log(data);
  visible.value = true;
  permissionFrom.value = new PermissionFrom();
  if (menuId) {
    setTimeout(() => {
      if (data) {
        isEditor.value = true;
        permissionFrom.value.permission = [data];
      } else {
        isEditor.value = false;
      }
      permissionFrom.value.menuId = menuId;
    }, 0);
  } else {
  }
};

const beforeClose = (deno: any) => {
  deno();
};

const submitForm = async () => {
  console.log(permissionFrom.value);
  const ret = await addPermission(permissionFrom.value);
  console.log(ret);
};

const updateUser = async () => {
  const res = await updatePermissionApi(permissionFrom.value);
  console.log(res);
};

defineExpose({ open });
</script>

<template>
  <el-dialog
    :before-close="beforeClose"
    v-model="visible"
    title="菜单权限"
    :with-header="false"
  >
    <el-form
      ref="permissionFromRef"
      label-position="left"
      label-width="auto"
      :model="permissionFrom"
      style="max-width: 600px"
    >
      <el-form-item label="权限名称">
        <el-input v-model="permissionFrom.permission[0].name"></el-input>
      </el-form-item>
      <el-form-item label="权限路径">
        <el-input v-model="permissionFrom.permission[0].path"></el-input>
      </el-form-item>
    </el-form>
    <template #footer v-slot="scope">
      <div class="drawer-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button v-if="!isEditor" type="primary" @click="submitForm"
          >添加</el-button
        >
        <el-button v-else type="primary" @click="updateUser">修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped lang="less"></style>
